<template>
    <van-row>
        <van-col :span="24">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                    v-model="username"
                    name="username"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                    v-model="password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                    />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
                </van-form>
        </van-col>
    </van-row>
</template>
<script setup>
        import { ref,getCurrentInstance } from "vue";
        import {showNotify} from 'vant';

        const {proxy} = getCurrentInstance();

        const username = ref('');
        const password = ref('');
        //username和password在上面做了数据绑定
        //在查看订单和新增订单时候必须要进行登录验证，才能进行查看 
        //还有userId存储在本地中，形成动态的，别写死了，然后没什么任务了
        const onSubmit=(values)=>{
            console.log('用户名：'+username+'密码：'+password);
            proxy.$axios({
                method:'post',
                url:'/login',
                data:values
            }).then(res=>{
                let resultBean=res.data;
                if(resultBean.code==200) {
                    let user=resultBean.data;
                    console.log(user);
                    window.localStorage.setItem('loginUser',JSON.stringify(user))
                    proxy.$router.push("/main");
                    showNotify({message:'储存成功'})
                } else {
                    showNotify({message:resultBean.msg})
                }
            }).catch(error=>{
                showNotify({message:error.message});
            })
            }
</script>